<template>
<!-- 投放预算 -->
<div class="budget">
        <div>
          账户余额：<span style='font-size:30px;'>1230.00</span>
          <el-button class="chz"><img src="static/images/qiasn.png">充值</el-button>
          <el-button>刷新余额</el-button>
          <p>预估投放成本：<span>1290.00</span>(实际投放成功后扣除)<span style="color:red;">友情提示：客房电视不开机、未展示等情况均不扣费</span></p>
        </div>
        <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
          <el-table-column  property="name"  label="酒店名称">  </el-table-column>
          <el-table-column  property="num"  label="客房数量"  > </el-table-column>
          <el-table-column  property="price"  label="展示单价/元"> </el-table-column>
          <el-table-column  property="price2"  label="小计/元"> </el-table-column>
        
        </el-table>
</div>
</template>
<script>
export default {
  name: 'budget',
  data(){
    return{
            tableData: [{
                name: 'W酒馆',
                num: '35',
                price: '22',
                price2: '1253.00'
            }, {
                name: 'W酒馆',
                num: '35',
                price: '22',
                price2: '1253.00'
            }],
        }
    }
   
}
</script>
<style rel="stylesheet/scss" lang="scss">
.budget{
    div{
        color: #989898;
        span{
            color: #ff7800;
            margin-left: 12px;
            margin-right: 20px;
        }
    }
    .el-button span{
        color: #fff;
        margin: 0;
    }
    p {
        margin: 30px 0;
        span{
            margin-left: 12px;
            margin-right: 20px;
            &:last-child{
                margin-left: 20px;
            }
        }
    }
    .chz{
        position: relative;
        padding: 12px 20px 12px 36px;
        img{
            position: absolute;
            left: 15px;
            top: 10px;
        }
    }
      .el-table th {
            background-color: #faf8f5;
            text-align: center;
            color: #666;
        }
    .el-table{
        border-radius: 8px;
        text-align: center;
        margin: 30px 0;
        border: 1px solid #ebeef5;
        border-bottom: none;
        
    }
    
}
</style>